<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>财务明细</title>
    <link rel="stylesheet" type="text/css" th:href="@{../static/css/nav.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{../static/css/index.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{../static/css/index2.css}" />
</head>

<body>
    <div class="nav">
        <div><a id="index" th:href="@{/toIndex}">收支查询</a></div>
        <div><a id="index2" th:href="@{/toIndex2}">财务明细</a></div>
        <div><a id="index3" th:href="@{/toIndex3}">成员管理</a></div>
        <div id="nav"></div>
        <div><a id="login" th:href="${session.name==null}?'/login/toLogin':'/login/toHomepage'">
                <p id="logState">登录</p>
            </a></div>
    </div>

    <div class="plan">
        <form class="thisyear" method="post" action="/update/thisyear">
            <label>今年计划</label>
            <br />
            <textarea cols="50" rows="10" th:text="${thisYearPlan.getThisyear()}" name="planContent"></textarea>
            <br />
            <input type="submit" value="提交">
        </form>
        <form class="nextyear" method="post" action="/update/nextyear">
            <label>明年计划</label>
            <br />
            <textarea cols="50" rows="10" th:text="${thisYearPlan.getNextyear()}" name="planContent"></textarea>
            <br />
            <input type="submit" value="提交">
        </form>
    </div>
    <br />
    <div class="condition">
        <form method="post" action="" id="cxtj">
            添加者:
            <select name="adder">
                    <option value="all" selected>全部</option>
                <div th:each="adder:${allAdder}">
                    <option th:text="${adder.getAdder()}"></option>
                </div>

            </select>
            类型:
            <select name="type">
                <option value="2" selected>全部</option>
                <option value="1">收入</option>
                <option value="0">支出</option>
            </select>
            <input type="button" value="查询" onclick="chaxun()">
            <input type="button" value="下载报表" onclick="xzbb()" style="width: 100px">
        </form>
    </div>
    <br \>

    <div id="tableFrame">
        <div id="scroll">
            <div id="tableFrameTitle">
                <ul>
                    <li>添加者</li>
                    <li>金额</li>
                    <li>类型</li>
                    <li>日期</li>
                    <li>描述</li>
                </ul>
            </div>
            <div id="tableCase">
                <ul th:each="r:${records}">
                    <li th:text="${r.getAdder()}"></li>
                    <li th:text="${r.getMoney()}"></li>
                    <li th:text="${r.getType()}"></li>
                    <li th:text="${r.getDate()}"></li>
                    <li th:text="${r.getDescribes()}" class="lastli"></li>
                </ul>
            </div>
        </div>
    </div>
    <br \>
    <div id="sum">
        总计为<span id="sumnum"></span>元
    </div>



 <script th:inline="javascript">
    window.onload = function () {
        var name = [[${ session.name }]];
        console.log(name)
        if (name != null && name != "") {
            document.getElementById("logState").innerText = name;
        }
        //计算总和
        var records = [[${records}]];
        var sum = 0;
        for (var r of records){
            if (r["type"]===1) sum += r["money"];
            else sum -= r["money"];

        }
        document.getElementById("sumnum").innerText = sum;
    }

    function chaxun(){
        var f = document.getElementById("cxtj");
        f.action="/query/choose";
        f.submit();
    }

    function xzbb(){
        var f = document.getElementById("cxtj");
        f.action="/download";
        f.submit();
    }
</script>
</body>

</html>